<script setup>
import {ref} from 'vue'

//学生json数组
const stuList = ref([
  {id:9001,name:'王二',age: 18,address:'四川绵阳'},
  {id:9002,name:'李四',age: 19,address:'四川雅安'},
  {id:9003,name:'张七',age: 22,address:'四川成都'},
])
</script>

<template>
  <table width="100%" border="1">
    <tr>
      <td>学号</td>
      <td>姓名</td>
      <td>年龄</td>
      <td>地址</td>
    </tr>
    <tr v-for="stu in stuList">
      <td>{{stu.id}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.age}}</td>
      <td>{{stu.address}}</td>
    </tr>
  </table>
  <table width="100%" border="1">
    <tr>
      <td>序号</td>
      <td>学号</td>
      <td>姓名</td>
      <td>年龄</td>
      <td>地址</td>
    </tr>
    <!-- 使用到了索引   -->
    <tr v-for="(stu,index) in stuList">
      <td>{{index+1}}</td>
      <td>{{stu.id}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.age}}</td>
      <td>{{stu.address}}</td>
    </tr>
  </table>
</template>

<style scoped>

</style>